<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" href="themes/main.css" type="text/css" />
</head>
<body>
<div id="content">
    <link rel="stylesheet" type="text/css" href="easyui/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui//demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<div>
	<div style="width:742px;float:right;background:#fff;border:1px solid #ddd;">
		
		<div style="height:40px;line-height:40px;padding:0 20px;background:#fafafa;border:1px solid #ddd;border-width:1px 0">
			<h2 style="margin:0">Source Code</h2>
		</div>
		<div id="code" style="height:350px;overflow:auto;direction:ltr;"></div>
	</div>
	<div>
		<h3 style="border-bottom:1px solid #ddd;padding:18px 0 0 10px">DataGrid</h3>
		<ul class='pitem'><li><a href='javascript:void(0)' onclick="open1('easyui/demo/datagrid/basic.html',this)">Basic DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('easyui/demo/datagrid/transform.html',this)">Transform DataGrid from Table</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/rowborder.html',this)">Row Border</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/selection.html',this)">DataGrid Selection</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/checkbox.html',this)">CheckBox Selection on DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/simpletoolbar.html',this)">DataGrid with Toolbar</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/complextoolbar.html',this)">DataGrid Complex Toolbar</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid30_demo.html',this)">DataGrid Filter Row</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/custompager.html',this)">Custom DataGrid Pager</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid2_demo.html',this)">Server Side Pagination</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/clientpagination.html',this)">Client Side Pagination</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid8_demo.html',this)">Sorting</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/multisorting.html',this)">Multiple Sorting</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/columngroup.html',this)">Column Group</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/aligncolumns.html',this)">Aligning Columns in DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/frozencolumns.html',this)">Frozen Columns in DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/formatcolumns.html',this)">Format DataGrid Columns</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/frozenrows.html',this)">Frozen Rows in DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid29_demo.html',this)">Group Rows in DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/rowediting.html',this)">Row Editing in DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/cellediting.html',this)">Cell Editing in DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/rowstyle.html',this)">DataGrid Row Style</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/cellstyle.html',this)">DataGrid Cell Style</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/footer.html',this)">Footer Rows in DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/mergecells.html',this)">Merge Cells for DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('../../easyui/demo/datagrid/contextmenu.html',this)">Context Menu on DataGrid</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid21_demo.html',this)">Master Detail</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid22_demo.html',this)">SubGrid</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid25_demo.html',this)">Large Data</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid16_demo.html',this)">Card View</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid26_demo.html',this)">Buffer View</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid27_demo.html',this)">Virtual Scroll View</a></li><li><a href='javascript:void(0)' onclick="open1('/tutorial/datagrid/datagrid28_demo.html',this)">Virtual Scroll View(Detail Rows)</a></li></ul>	</div>
	<div style="clear:both"></div>
</div>
 
<div id="setting" style="position:absolute;">
	<table>
		<tr>
			<td><span style="color:#999">Themes:</span></td>
			<td>
				<select id="cb-theme" data-options="editable:false,panelHeight:'auto',onChange:onChangeTheme">
					<option value='default' >Default</option><option value='gray' selected>Gray</option><option value='black' >Black</option><option value='bootstrap' >Bootstrap</option><option value='metro' >Metro</option></select>
			</td>
			<td><span style="color:#999">RTL:</span></td>
			<td>
				<input id="ck-rtl" type="checkbox"  onclick="open2()">
			</td>
		</tr>
	</table>
</div>
<div id="demo" data-options="href:'component/employee/index.html',border:false,onLoad:onLoad" style="padding:20px;overflow:hidden;min-height:350px"></div>
 <script>
	$(function(){
		$('#demo').panel();
		$('#cb-theme').combobox();
		var dp = $('#demo').offset();
		if ($('#ck-rtl').is(':checked')){
			$('body').addClass('demo-rtl');
			$('#setting').css({
				left: (dp.left+15),
				top: (dp.top+18)
			});
		} else {
			$('#setting').css({
				left: (dp.left+$('#demo').outerWidth()-$('#setting').outerWidth()-15),
				top: (dp.top+18)
			});
		}
	});
	function onLoad(data){
		data = data.replace(/(\r\n|\r|\n)/g, '\n');
		data = data.replace(/\t/g, '    ');
		$('#code').html('<pre name="code" class="prettyprint linenums" style="border:0"></pre>');
		$('#code').find('pre').text(data);
		prettyPrint();
	}
	function onChangeTheme(theme){
		var link = $('#content').find('link:first');
		link.attr('href', 'easyui/themes/'+theme+'/easyui.css');
	}
	var currPlugin = 'DataGrid';
	var currPageItem = 'Basic DataGrid';
	function open1(url,a){
		currPageItem = $(a).text();
		$('body>div.menu-top').menu('destroy');
		$('body>div.window>div.window-body').window('destroy');
		$('#demo').panel('refresh',url);
	}
	function open2(plugin){
		if (plugin){
			currPlugin = plugin;
			currPageItem = '';
		}
		var href = '?plugin=' + currPlugin + '&theme=' + $('#cb-theme').combobox('getValue');
		href += '&dir=' + ($('#ck-rtl').is(':checked')?'rtl':'ltr');
		href += '&pitem=' + currPageItem;
		location.href = href;
	}

</script>
	</div>
</body>
</html>